<template lang="pug">
  .app-container.device-created
    h1.page-title 设备管理
    .main
      el-breadcrumb(
        class="title"
        separator-class="el-icon-arrow-right")
        el-breadcrumb-item(:to="{ path: '/product' }") 设备列表
        el-breadcrumb-item 添加设备
      .table-wrapper
        el-scrollbar(style="height:100%")
          el-form(
            ref="form"
            :rules="rules"
            :model="form"
            label-width="80px")
            el-row
              el-col(:xs="18" :sm="16" :md="14")
                el-row(:gutter="20")
                  el-col(:md="12")
                    el-form-item(label="所属项目" prop="value1")
                      el-select(
                        v-model="form.value1"
                        placeholder="所属项目"
                        style="width:100%")
                        el-option(
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value")
                  el-col(:md="12")
                    el-form-item(label="所属系统" prop="value1")
                      el-select(
                        v-model="form.value1"
                        placeholder="所属系统"
                        style="width:100%")
                        el-option(
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value")

                  el-col(:md="12")
                    el-form-item(label="设备名称" prop="value1")
                      el-input(placeholder="请输入设备名称")
                  el-col(:md="12")
                    el-form-item(label="设备编号" prop="value1")
                      el-input(placeholder="请输入设备编号")

                  el-col(:md="12")
                    el-form-item(label="设备类型" prop="value2")
                      el-select(
                        v-model="form.value2"
                        placeholder="请选择设备类型"
                        style="width:100%")
                        el-option(
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value")
                  el-col(:md="12")
                    el-form-item(label="协议类型" prop="value2")
                      el-select(
                        v-model="form.value2"
                        placeholder="请选择协议类型"
                        style="width:100%")
                        el-option(
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value")

                  el-col(:md="12")
                    el-form-item(label="通讯地址" prop="value2")
                      el-input
                  el-col(:md="12")
                    el-form-item(label="位置" prop="value2")
                      el-input

                  el-col
                    el-form-item(label="关联BIM" prop="" style="width:100%;padding-right:10px")
                      el-radio-group(v-model="form.resource" style="width:100%")
                        .flex-row.align--center
                          .flex-item
                            el-radio(label="是")
                          .flex-item
                            el-select(
                              v-model="form.value2"
                              placeholder="请选择协议类型")
                              el-option(
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value")
                          .flex-item
                            el-radio(label="否")
                          .flex-item.flex-1
                            el-input(style="min-width:198px")
                          .flex-item
                            el-button(type="primary") 搜索
                el-row(type="flex" justify="center" align="center")
                  el-button(type="primary" @click="onSubmit('form')") 保存
                  el-button(type="info" plain @click="resetForm('form')") 取消
</template>

<script>
export default {
  name: 'CreateProduct',
  data () {
    return {
      // 所属系统
      options1: [
        {
          value: 0,
          label: '全部系统'
        },
        {
          value: 1,
          label: '供水'
        },
        {
          value: 2,
          label: '给排水'
        },
        {
          value: 3,
          label: '供配电'
        },
        {
          value: 4,
          label: '暖通空调'
        },

        {
          value: 5,
          label: '消防'
        },
        {
          value: 6,
          label: '中央空调'
        },
        {
          value: 7,
          label: '排风机设备'
        },
        {
          value: 8,
          label: '空调机组设备'
        },
        {
          value: 9,
          label: '冷冻水系统公共设备'
        },
        {
          value: 10,
          label: '新风机组设备'
        },
        {
          value: 11,
          label: '环境'
        },
        {
          value: 12,
          label: '网络摄像头'
        },
        {
          value: 13,
          label: '电梯'
        },
        {
          value: 14,
          label: '能源'
        },

        {
          value: 15,
          label: '其他'
        }
      ],
      // 协议类型
      options2: [
        {
          value: 0,
          label: '全部产品'
        },
        {
          value: 1,
          label: '默认产品'
        },
        {
          value: 2,
          label: '阿里云产品'
        },
        {
          value: 3,
          label: '电信产品'
        },
        {
          value: 4,
          label: '阿里云网关'
        },

        {
          value: 5,
          label: '终端设备'
        },
        {
          value: 6,
          label: '普通网关'
        }
      ],
      // 表单 添加设备
      form: {
        categoryKey: 1,
        category: {
          label: '',
          value: ''
        },
        resource: '',
        nodeTypeValue: 0,
        textarea: ''
      },
      // 表单效验
      rules: {
        productName: [
          { required: true, message: '请输入您的产品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        categoryKey: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        nodeType: [{ required: true }],
        value1: [{ required: true }],
        value2: [{ required: true }]
      },
      /*
        标准品类选择器部分
      */
      // 标准品类选择器弹框显示控制
      dialogVisible: false,
      // 条件筛选
      filterForm: {
        categoryId: 0
      },
      // 分类列表源
      categoryList: [],
      // 分类列表 过滤后
      filterCategiryList: [],
      // 分页配置 页码个数
      pagerCount: 5,
      // 分页配置 当前页
      CurrentPage: 1,
      // 分页配置 每页显示条数
      pageSize: 10,
      localUrl: ''
    }
  },
  computed: {
    /**
     * 根分类
     */
    rootCategories () {
      const catelist = this.categoryList
        .filter(item => item.SuperId === 0)
        .map(item => {
          return {
            ...item,
            site: item.CategoryName
          }
        })
      return [
        {
          SuperId: 0,
          CategoryKey: 'AllCategory',
          CategoryName: '全部领域',
          Id: 0,
          site: ''
        },
        ...catelist
      ]
    },

    /**
     * 过滤后的总条数
     */
    filterCategiryTotal () {
      return this.filterCategiryList.length
    }
  },
  watch: {
    /**
     * 监听条件筛选
     */
    filterForm: {
      handler (newName, oldName) {
        this.changeFilterList()
      },
      // immediate: true,
      deep: true
    }
  },
  created () {
  },
  methods: {
    onChangeButton (index) {
      this.form.nodeTypeValue = index
    },
    onSubmit (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!', this.form)
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    onShowCategoryDialog () {
      this.dialogVisible = true
    },
    onHideCategoryDialogClose () {
      this.dialogVisible = false
    },

    getTreeList (superItem) {
      if (!superItem) {
        return
      }
      var children = this.categoryList.filter(
        item => item.SuperId === superItem.Id
      )
      if (children.length > 0) {
        children.forEach(item => {
          const returnItem = {
            SuperId: item.SuperId,
            CategoryKey: item.CategoryKey,
            CategoryName: item.CategoryName,
            Id: item.Id,
            site: superItem.Id === 0 ? `${item.CategoryName}` : `${superItem.site || superItem.CategoryName} / ${item.CategoryName}`
          }
          this.filterCategiryList.push(returnItem)
          this.getTreeList(returnItem)
        })
      }
    },

    changeFilterList () {
      this.CurrentPage = 1
      this.filterCategiryList = []
      let superItem = this.categoryList.find(
        item => item.Id === this.filterForm.categoryId
      )
      if (this.filterForm.categoryId === 0) {
        superItem = this.rootCategories[0]
      }
      this.getTreeList(superItem)
    },
    onSelectCategory (index, item) {
      this.form.category.label = item.site
      this.form.category.value = item.Id
      this.onHideCategoryDialogClose()
    },
    onChangeProductIcon (file, fileList) {
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.productIcon = this.getLocalImageUrl(file)
      // this.fileList = fileList.slice(-3)
    },
    onChangeProductImage (file, fileList) {
      this.productDefaultImage = this.getLocalImageUrl(file)
    },
    getLocalImageUrl (file) {
      // 获取上传图片的本地URL，用于上传前的本地预览
      var URL = null
      if (window.createObjectURL !== undefined) {
        // basic
        URL = window.createObjectURL(file.raw)
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        URL = window.URL.createObjectURL(file.raw)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        URL = window.webkitURL.createObjectURL(file.raw)
      }

      return URL
    },
    uploadImage (params) {
      //* 1. 图片处理
      const { file } = params
      const fileType = file.type // 获取文件类型
      const isImage = fileType.indexOf('image') !== -1 // 判断是否是图片类型
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        // 判断大小
        this.$message.error('上传图片的大小不能超过 2MB!')
        return Promise.reject(new Error('上传图片的大小不能超过 2MB!'))
      }
      if (!isImage) {
        // 文件格式
        this.$message.error('请选择图片文件！')
        return Promise.reject(new Error('请选择图片文件！'))
      }
      //* 2. 图片上传
      const formData = new FormData()
      formData.append('file', file)
      console.log(FormData)
      // TODO
    }
  }
}
</script>

<style lang="stylus" scoped>
$lineheight = (20 / 14)
.app-container
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color #f2f2f7
  padding 20px
  display flex
  flex-direction column
.page-title
  margin-top 0
  color #000
  font-size 24px
  font-weight normal
  flex-shrink 0
.main
  flex 1
  overflow hidden
  background-color #ffffff
  display flex
  flex-direction column
.title
  margin 16px 0
  display flex
  align-items center
  color #000
  font-size 20px
  font-weight normal
  &::before
    content ''
    display inline-block
    width 7px
    height 22px
    margin-right 20px
    background-color #017eff
.table-wrapper
  margin 20px
  flex 1
  overflow hidden
.el-popover--content
  font-size 12px
  line-height $lineheight
.question
  margin-left 4px
  cursor help
.button-wrapper
  display flex
  justify-content center
.flex-row
  display flex
  margin 0 -10px
  flex-wrap wrap
  &.align--end
    align-items:flex-end
  &.align--center
    align-items center
  .flex-item
    margin 0 10px
    flex-shrink 0
    margin-bottom: 20px
    &.flex-1
      flex 1
.img-box
  width 100px
  height 100px
  background-color #f5f5f5
  vertical-align top
  display flex
  align-items center
  justify-content center
  &--inner
    max-width 100%
    max-height 100%
    vertical-align top
</style>

<style lang="stylus">
.el-scrollbar__wrap
  overflow-x hidden
.title .is-link
  font-weight normal
</style>
